<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>

<div id="attr">
    <p>Original message:"{{ message }}"</p>
    <p>Computed reversed message:"{{ reversedMessage1 }}"</p>
    <p>Reversed message:"{{ reversedMessage()}}"</p>
    <p>Computed now:"{{cnow}}"</p>
    <p>function now:"{{fnow()}}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#attr',
        data: {
            message: 'Attribute'
        },
        computed: {
            reversedMessage1: function () {
                return this.message.split('').reverse().join('')

            },
            cnow: function () {
                return Date.now().toLocaleString();

            }
        },
        methods: {
            reversedMessage: function () {

                return this.message.split('').reverse().join('')
            },
            fnow: function () {
                return Date.now().toLocaleString();

            }

        }
    })


</script>
<br>

<div id="aboutname">{{ fullname }}</div>
<script>
    var vm2 = new Vue({
        el: '#aboutname',
        data: {
            firstname: 'shen',
            lastname: 'jiajia',
            fullname: 'shen jiajia'
        },
        watch: {
            firstname: function (val) {
                this.fullname = val + ' ' + this.lastname;

            },
            lastname: function (val) {
                this.fullname = this.firstname + ' ' + val;

            }

        }
    })
</script>
<div id="aboutname2">{{ fullname }}</div>
<script>
    var vm3 = new Vue({
        el: '#aboutname2',
        data: {
            firstname: 'shen',
            lastname: 'jiajia',
        },
        computed: {
            fullname: function () {
                return this.firstname + ' ' + this.lastname;
            }

        }
    })
</script>

<div id="aboutname3">{{fullname}}</div>
<script>
    var vm4=new Vue({
        el:'#aboutname3',
        data: {
            firstname:'shen',
            lastname:'jiajai'
        },
        computed:{
            fullname:{
                get:function () {
                    return this.firstname+' '+this.lastname;

                },
                set:function (newvalue) {
                    var names=newvalue.split(' ');
                    this.firstname=names[0];
                    this.lastname=names[names.length-1]



                }
            }
        }

    })
</script>

</body>
</html>